﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Drawing Tools Sample</title>

    <!-- Bing Map Control references -->
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <!-- jquery and jquery UI references -->
    <script type="text/javascript" src='http://code.jquery.com/jquery-1.11.0.min.js'></script>

    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <!-- Our Bing Maps JavaScript Code -->
    <script src="js/CustomToolbarExample.js"></script>

    <style type="text/css">
        /* Custom drag handle styles */
        .customPrimaryDragHandle div {
            width:10px;
            height:10px;
            border:solid 2px #000;
            background-color:#fff;
            margin:-5px 0 0 -5px;
            cursor:move;
        }
            
        .customSecondaryDragHandle div {
            width:10px;
            height:10px;
            border:solid 2px #000;
            background-color:#fff;
            margin:-5px 0 0 -5px;
            opacity:0.5;
            cursor:move;
        }

        /* Styles for page */

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #myMap{
            position:relative;
            width:100%;
            height:100%;
        }

        #toolbar { 
            position:absolute; 
            top:75px; 
            right:20px; 
            background-color:black; 
            padding:10px; 
            width:250px; 
            height:290px; 
        }

        .drawingBtns button {
            height: 40px;
            margin: 2px 0;
            font-family: Segoe UI Symbol;
            font-size: 24px;
            width: 55px;
        }
 
        .toogleOn { 
            background-color:white; 
            color:black; 
        } 
 
        .sliderTable { 
            margin-top:10px; 
            width:100%; 
            font-size:14px; 
            color:#fff;
        } 
 
         #red, #green, #blue, #alpha, #lineWidth { 
            float: left; 
            clear: left; 
            width: 120px; 
            margin: 8px 5px; 
        } 
 
        #swatch { 
            width: 100%; 
            height: 25px; 
            border:2px solid white; 
        } 
 
        #clearBtn { 
            margin:10px 0 0 75px; 
        } 
 
        .ui-slider .ui-slider-handle { 
            width: 5px; 
            height: 12px; 
        } 
 
        .ui-slider-horizontal { 
            height:5px; 
        } 
 
        /* Bug fix for mouse events on Polylines and Polygons in IE11 */ 
        .MicrosoftMapDrawing, .MapPushpinBase { 
            pointer-events: auto !important; 
        }
    </style>
</head>
<body>
    <div id="myMap"></div>

    <div id="toolbar">
        <div class="drawingBtns">
            <button rel="pushpin">&#xE1C4;</button>
            <button rel="polyline">&#xE199;</button>
            <button rel="polygon">&#x2B1F;</button>
            <button rel="rectangle">&#x25AC;</button>
            <button rel="circle">&#x25CF;</button>
            <button rel="edit" tag="Edit Shape">&#xE0D8;</button>
            <button rel="erase">&#xE107;</button>
        </div>

        <table class="sliderTable">
            <tr>
                <td colspan="3"><div id="swatch"></div></td>
            </tr>
            <tr>
                <td>Red</td>
                <td width="130px"><div id="red" rel="rLabel"></div></td>
                <td width="25px"><div id="rLabel"></div></td>
            </tr>
            <tr>
                <td>Green</td>
                <td><div id="green" rel="gLabel"></div></td>
                <td><div id="gLabel"></div></td>
            </tr>
            <tr>
                <td>Blue</td>
                <td><div id="blue" rel="bLabel"></div></td>
                <td><div id="bLabel"></div></td>
            </tr>
            <tr>
                <td>Alpha</td>
                <td><div id="alpha" rel="aLabel"></div></td>
                <td><div id="aLabel"></div></td>
            </tr>
            <tr>
                <td>Line Width</td>
                <td><div id="lineWidth"></div></td>
                <td><div id="lwLabel"></div></td>
            </tr>
        </table>

        <button id="clearBtn">Clear All</button>
    </div>
</body>
</html>